import type { GenerateStyle } from "@ant-design/pro-components";
import type { TechUIToken } from "./useStyle";
import { resetComponent, useTechUIStyle } from "./useStyle";

const prefixPipelineCls = "tech-pipeline";

export const prefixPipelineContainerCls = `${prefixPipelineCls}-container`;
export const prefixPipelineStageCls = `${prefixPipelineCls}-stage`;
export const prefixPipelineTaskCls = `${prefixPipelineCls}-task`;
export const prefixPipelineSvgCls = `${prefixPipelineCls}-svg`;
export const prefixPipelineIconProgressCls = `${prefixPipelineCls}-progress-icon`;

// ~antd/es/style/color/colors 里面没有定义中性色变量
export const grayBase = "#bfbfbf";
export const gray1 = "#ffffff";
export const gray2 = "#fafafa";
export const gray3 = "#f5f5f5;";
export const gray4 = "#f0f0f0";
export const gray5 = "#d9d9d9";
export const gray6 = "#bfbfbf";
export const gray7 = "#8c8c8c";
export const gray8 = "#595959";
export const gray9 = "#434343";
export const gray10 = "#262626";
export const gray11 = "#1f1f1f";
export const gray12 = "#141414";
export const gray13 = "#000000";

const genTecUIStyle: GenerateStyle<TechUIToken> = (token) => {
  const { componentCls } = token;
  return {
    [`${componentCls}-direction-vertical`]: {
      [`${componentCls}-container`]: {
        display: "flex",
        flexDirection: "column",
        gap: 24,
      },
      [`${componentCls}-stage`]: {
        marginInlineStart: "48px",
        marginInlineEnd: "12px",
      },
    },
    [`${componentCls}-hide-stage`]: {
      [`${componentCls}-stage`]: {
        background: "transparent !important",
        [`${componentCls}-stage-title`]: {
          display: "none",
        },
      },
      [`${componentCls}-task`]: {
        margin: 0,
        marginBlockEnd: token.margin,
      },
    },
    [componentCls]: {
      ...resetComponent?.(token),
      position: "relative",
      overflow: "auto",
      [`${componentCls}-container`]: {
        display: "flex",
      },
      [`${componentCls}-stage`]: {
        position: "relative",
        height: "fit-content",
        marginInlineEnd: "48px",
        background: "rgba(0, 0, 0, 0.02)",
        borderRadius: token.borderRadius,
        "&:last-child": {
          marginInlineEnd: 0,
        },

        "&-title": {
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          minHeight: "56px",
          paddingBlock: 0,
          paddingInline: 21,
          "&-left": {
            flex: 1,
            "&-status": {
              display: "inline-block",
              marginInlineEnd: 8,
            },
            "&-text": {
              color: gray10,
              fontSize: token.fontSize,
            },
            "&-tooltip": {
              marginInlineStart: "5px",
              color: gray8,
            },
          },
        },
      },
      [`${componentCls}-task`]: {
        marginInline: 8,
        marginBlockStart: 0,
        marginBlockEnd: 8,
        background: gray1,
        "&-card": {
          // minHeight: '38px',
          paddingBlock: token.paddingXS,
          paddingInline: token.paddingSM,
          background: gray1,
          border: `1px solid ${gray4}`,
          borderRadius: token.borderRadius,
          "&-expanded": {
            borderRadius: `${token.borderRadius} ${token.borderRadius} 0 0`,
          },
          "&-status": {
            "&-wait": {
              background: gray2,
            },
            "&-process": {
              borderColor: token["blue-5"],
              "&-hover:hover": {
                borderColor: token["blue-7"],
                cursor: "pointer",
              },
            },
            "&-error": {
              borderColor: token["red-5"],
              "&-hover:hover": {
                borderColor: token["red-7"],
                cursor: "pointer",
              },
            },
            "&-success": {
              borderColor: gray4,
              "&-hover:hover": {
                borderColor: gray5,
                cursor: "pointer",
              },
            },
          },
          "&-title": {
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",

            "&-left": {
              "&-status": {
                display: "inline-block",
                marginInlineEnd: token.marginXS,
              },
              "&-text": {
                color: gray10,
                fontSize: token.fontSize,
              },
            },
            "&-right": {
              display: "flex",
              alignItems: "center",
              "&-divider": {
                width: "1px",
                height: "16px",
                marginInline: 12,
                marginBlock: 0,
                background: gray4,
              },
              "&-expander": {
                ".anticon": {
                  color: gray7,
                },
              },
            },
            "&-description": {
              color: gray7,
              fontSize: token.fontSizeSM,
            },
          },
        },
        "&-detail": {
          background: gray2,
          border: `1px solid ${gray4}`,
          borderBlockStart: 0,
          borderRadius: `0 0 ${token.borderRadius} ${token.borderRadius}`,
        },
      },
      [`${componentCls}-svg`]: {
        position: "absolute",
        insetBlockStart: 0,
        insetInlineStart: 0,
        width: "100%",
        height: "100%",
        svg: {
          width: "100%",
          height: "100%",
        },
      },
      [`${componentCls}-progress-icon`]: {
        display: "inline-block",
        "&-percent": {
          width: "14px",
          height: "14px",
          verticalAlign: "-0.125em",
          border: `1px solid ${token["blue-7"]}`,
          borderRadius: "50%",
        },
      },
    },
  };
};

export function useStyle(prefixCls: string) {
  return useTechUIStyle("Pipeline", (token) => {
    const proToken: TechUIToken = {
      ...token,
      componentCls: `.${prefixCls}`,
    };

    return [genTecUIStyle(proToken), {}];
  });
}
